<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/production/productionList.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->
</head>

<body>
  <header></header>

  <div class="productList-container">
    <div class="productList-container-img">
      <div class="common-container-img">
        <img class="bannerPc" src="../../img/customer/banner.jpg" alt="">
        <img class="bannerMb" src="../../img/customer/banner.jpg" alt="">
        <ul class="common-container-type clearfix wow fadeInUpBig">
          <li class="active">
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon1.png" alt="">
            <img class="icon activeImg" src="../../img/production/icon-1.png" alt="">
            <span>十三香类</span></li>
          <li>
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon2-1.png" alt="">
            <img class="icon activeImg" src="../../img/production//icon-2.png" alt="">
            <span>鸡精类</span></li>
          <li>
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon3-1.png" alt="">
            <img class="icon activeImg" src="../../img/production//icon-3.png" alt="">
            <span>麻辣鲜类</span></li>
          <li>
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon4-1.png" alt="">
            <img class="icon activeImg" src="../../img/production//icon-4.png" alt="">
            <span>原料精装类</span></li>
          <li>
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon5-1.png" alt="">
            <img class="icon activeImg" src="../../img/production//icon-5.png" alt="">
            <span>综合科类</span></li>
          <li>
            <img class="hides" src="../../img/production/select.png" alt="">
            <img class="icon icon1" src="../../img/production/icon6-1.png" alt="">
            <img class="icon activeImg" src="../../img/production//icon-6.png" alt="">
            <span>礼品类</span></li>
        </ul>
      </div>
    </div>
    <div class="tabBox">
      <div class="listEle">
        <div class="titles show wow fadeInUpBig">十三香1</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
      <div class="listEle displayNone">
        <div class="titles show wow fadeInUpBig">十三香2</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
      <div class="listEle displayNone">
        <div class="titles show wow fadeInUpBig">十三香3</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
      <div class="listEle displayNone">
        <div class="titles show wow fadeInUpBig">十三香4</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
      <div class="listEle displayNone">
        <div class="titles show wow fadeInUpBig">十三香5</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
      <div class="listEle displayNone">
        <div class="titles show wow fadeInUpBig">十三香6</div>
        <div class="titleLine show wow fadeInUpBig"><span></span></div>
        <div class="productText show wow fadeInUpBig">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成</div>
        <div class="top clearFix hide wow fadeInUpBig">
          <div class="pull-left">产品详情</div>
          <a href="detai.html">
            <div class="pull-right"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <ul class="list clearfix  wow fadeInUpBig">
          <a href="detail.html" target="_blank">
            <li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src='../../img/production/banner_05.jpg' alt=""></li>
          </a>
        </ul>
      </div>
    </div>
  </div>
  <footer></footer>

  <script src="../../js/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    $(function () {
      var url      // 用于被选中时的背景图片 （备用）
      var listEle = []
      var imgArr = ['../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg']

      $(".common-container-type li").click(function () {
        $(this).addClass('active').siblings().removeClass('active'); // 添加当前元素的样式
        var idx = $(this).index()
        $('.listEle').eq(idx).show().siblings('.listEle').hide()
      })

      var getUrlParams = window.location.href
      if (getUrlParams.indexOf('?') > 0) {
        var idx = getUrlParams.split('?')[1].split('=')[1]
        var tabActive = $(".common-container-type li").eq(idx)
        tabActive.addClass('active').siblings().removeClass('active'); // 添加当前元素的样式
        $('.listEle').eq(idx).show().siblings('.listEle').hide()

      }

      function setDomEle(setTitle) {
        tabFlag = false
        listEle = []
        var setTitle = setTitle || '十三香'
        $('.titles').html(setTitle)
        $('.productText').html(setTitle + ' - 本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成')
        $('ul.list li').remove()

        // 兼容ie8
        for (var index = 0, len = imgArr.length; index < len; index++) {
          var item = imgArr[index]
          listEle.push('<a href="detail.html' + '" target="_blank">'
            + '<li class="pull-left col-xs-6 col-lg-3 col-md-4"><img src=' + item + ' alt=""></li>'
            + '</a>')
        }
        $('ul.list').append(listEle.join(''))
      }
      // 默认第一个
      // setDomEle()
      $('.productList-container-type li:nth-child(1)').css({ 'background': 'url(../../img/production/select.png) no-repeat 100% 100%', 'color': '#fff' }).siblings().css({ 'background': '#fff', 'color': '#000' })

      $('header').load('../../template/header.html')
      $('footer').load('../../template/footer.html')
      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };
    })



  </script>
</body>

</html>